<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>文本节点crud</title>
    <script type="text/javascript">
        function method01(){
            //获取所要操作的元素节点
            var divElement=document.getElementById('mydiv');
            //通过元素节点调用相应的方法
           // divElement.innerText='我是div内容';
            //浏览器不会执行此行代码
            divElement.innerText='<font color="red">我是div内容</font>';
        }
        function method02(){
            //获取所要操作的元素节点
            var divElement=document.getElementById('mydiv');
            //通过元素节点调用相应的方法
            //只会获取标签对里的纯文本
            console.log(divElement.innerText);
        }
        function method03(){
            //获取所要操作的元素节点
            var divElement=document.getElementById('mydiv');
            //通过元素节点调用相应的方法
            divElement.innerText='我是div内容';
            //浏览器不会执行此行代码
            divElement.innerText='<font color="blue">我是div内容</font>';
        }
        function method04(){
            //获取所要操作的元素节点
            var divElement=document.getElementById('mydiv');
            //通过元素节点调用相应的方法
            divElement.innerText='';
        }
    </script>
</head>
<body>
<div id="mydiv"><font color="red">我是div</font></div><br>
<button onclick="method01()">添加文本节点</button><br>
<button onclick="method02()">获取文本节点</button><br>
<button onclick="method03()">修改文本节点</button><br>
<button onclick="method04()">删除文本节点</button><br>
</body>
</html>